﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="XepPhong.ascx.cs" Inherits="QuanLyKTX_XepPhong_XepPhong" %>
<style type="text/css">
    #origin {
        background-color: lightgreen;
    }

        #origin img, #drop img {
            margin-top: 3px;
            margin-left: 5px;
        }

    #drop {
        background-color: red;
        min-height: 120px;
    }

    .over {
        border: solid 5px purple;
        z-index: 10000;
    }

    .draggable {
        border: solid 2px gray;
    }


    #gallery {
        float: left;
        width: 65%;
        min-height: 12em;
    }

    .gallery.custom-state-active {
        background: #eee;
    }

    .gallery li {
        float: left;
        width: 96px;
        padding: 0.4em;
        margin: 0 0.4em 0.4em 0;
        text-align: center;
    }

        .gallery li h5 {
            margin: 0 0 0.4em;
            cursor: move;
        }

        .gallery li a {
            float: right;
        }

            .gallery li a.ui-icon-zoomin {
                float: left;
            }

        .gallery li img {
            width: 100%;
            cursor: move;
        }

    #trash {
        float: right;
        width: 32%;
        min-height: 18em;
        padding: 1%;
    }

        #trash h4 {
            line-height: 16px;
            margin: 0 0 0.4em;
        }

            #trash h4 .ui-icon {
                float: left;
            }

        #trash .gallery h5 {
            display: none;
        }
</style>
<div class="subnav admin-views-subnav">
    <div class="container-fluid">
        <ul class="nav nav-pills">
            <li><a href="Default.aspx">Xếp phòng</a></li>
            <li class="active"><a href="#">Thêm mới</a></li>

        </ul>
    </div>
</div>
<div class="container-fluid" id="dvGrid">
    <div class="editor admin-editor">

        <div id="overlay-editor">
            <div id="StatusBox" runat="server">
            </div>

            <div class="row clearfix">
                <div class="col-md-8">
                    <div id="origin" class="fbox">
                        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
                        <img src="http://placehold.it/150x100" id="two" title="two" class="draggable" />
                        <img src="http://placehold.it/160x100" id="three" title="three" />
                    </div>
                </div>
                <div class="col-md-4">
                    <div id="drop" class="fbox">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="ui-widget ui-helper-clearfix">
    <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
        <li class="ui-widget-content ui-corner-tr">
            <h5 class="ui-widget-header">High Tatras</h5>
            <img src="/images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72">
            <a href="/images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
            <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
        </li>
        <li class="ui-widget-content ui-corner-tr">
            <h5 class="ui-widget-header">High Tatras 2</h5>
            <img src="/images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72">
            <a href="/images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
            <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
        </li>
        <li class="ui-widget-content ui-corner-tr">
            <h5 class="ui-widget-header">High Tatras 3</h5>
            <img src="/images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72">
            <a href="/images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
            <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
        </li>
        <li class="ui-widget-content ui-corner-tr">
            <h5 class="ui-widget-header">High Tatras 4</h5>
            <img src="/images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72">
            <a href="/images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
            <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
        </li>
    </ul>
    <div id="trash" class="ui-widget-content ui-state-default">
        <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $(".draggable").draggable({ cursor: "crosshair", revert: "invalid" });
        $("#drop").droppable({
            accept: ".draggable",
            drop: function (event, ui) {
                console.log("drop");
                $(this).removeClass("border").removeClass("over");
                var dropped = ui.draggable;
                var droppedOn = $(this);
                $(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOn);
                alert('đưa vào phòng');

            },
            over: function (event, elem) {
                $(this).addClass("over");
                console.log("over");
            }
                        ,
            out: function (event, elem) {
                $(this).removeClass("over");
            }
        });
        $("#drop").sortable();

        $("#origin").droppable({
            accept: ".draggable", drop: function (event, ui) {
                console.log("drop");
                $(this).removeClass("border").removeClass("over");
                var dropped = ui.draggable;
                var droppedOn = $(this);
                $(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOn);
                alert('đưa ra khỏi phòng');
            }
        });
    });
</script>
<script>
    $(function () {
        // there's the gallery and the trash
        var $gallery = $("#gallery"),
        $trash = $("#trash");
        // let the gallery items be draggable
        $("li", $gallery).draggable({
            cancel: "a.ui-icon", // clicking an icon won't initiate dragging
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            containment: "document",
            helper: "clone",
            cursor: "move"
        });
        // let the trash be droppable, accepting the gallery items
        $trash.droppable({
            accept: "#gallery > li",
            activeClass: "ui-state-highlight",
            drop: function (event, ui) {
                alert('xóa khỏi list, đưa vào trash');
                deleteImage(ui.draggable);
            }
        });
        // let the gallery be droppable as well, accepting items from the trash
        $gallery.droppable({
            accept: "#trash li",
            activeClass: "custom-state-active",
            drop: function (event, ui) {
                alert('xóa khỏi trash');
                recycleImage(ui.draggable);
            }
        });
        // image deletion function
        var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
        function deleteImage($item) {
            $item.fadeOut(function () {
                var $list = $("ul", $trash).length ?
                $("ul", $trash) :
                $("<ul class='gallery ui-helper-reset'/>").appendTo($trash);
                $item.find("a.ui-icon-trash").remove();
                $item.append(recycle_icon).appendTo($list).fadeIn(function () {
                    $item
                    .animate({ width: "48px" })
                    .find("img")
                    .animate({ height: "36px" });
                });
            });
        }
        // image recycle function
        var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
        function recycleImage($item) {
            $item.fadeOut(function () {
                $item
                .find("a.ui-icon-refresh")
                .remove()
                .end()
                .css("width", "96px")
                .append(trash_icon)
                .find("img")
                .css("height", "72px")
                .end()
                .appendTo($gallery)
                .fadeIn();
            });
        }
        // image preview function, demonstrating the ui.dialog used as a modal window
        function viewLargerImage($link) {
            var src = $link.attr("href"),
            title = $link.siblings("img").attr("alt"),
            $modal = $("img[src$='" + src + "']");
            if ($modal.length) {
                $modal.dialog("open");
            } else {
                var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
                .attr("src", src).appendTo("body");
                setTimeout(function () {
                    img.dialog({
                        title: title,
                        width: 400,
                        modal: true
                    });
                }, 1);
            }
        }
        // resolve the icons behavior with event delegation
        $("ul.gallery > li").click(function (event) {
            var $item = $(this),
            $target = $(event.target);
            if ($target.is("a.ui-icon-trash")) {
                deleteImage($item);
            } else if ($target.is("a.ui-icon-zoomin")) {
                viewLargerImage($target);
            } else if ($target.is("a.ui-icon-refresh")) {
                recycleImage($item);
            }
            return false;
        });
    });
</script>
